import React from 'react'
import {View, Text, TouchableOpacity, ScrollView} from 'react-native'
import Icon from "react-native-vector-icons/FontAwesome";

export default function (props) {
  const {title,left, right, scrollView} = props;
  return (
    <View style={pageStyle.wrap}>
      <View style={pageStyle.head}>
        <Text style={pageStyle.headText}>{title}</Text>
        {left && <TouchableOpacity style={pageStyle.headBack} onPress={left.fn}>
          <Text style={pageStyle.headBackText}>
            {left.icon && <Icon name={left.icon} size={24} color={'#fff'} />}
            {left.text}
          </Text>
        </TouchableOpacity>}
        {right && <TouchableOpacity style={pageStyle.headRight} onPress={right.fn}>
          <Text style={pageStyle.headBackText}>
            {right.icon && <Icon name={right.icon} size={24} color={'#fff'} />}
            {right.text}
          </Text>
        </TouchableOpacity>}
      </View>
      {scrollView ? <ScrollView style={pageStyle.contentWrap}>{props.children}</ScrollView> : props.children}
    </View>
  )
}
const pageStyle = {
  wrap: {
    height: '100%',
    display: 'flex',
    flexDirection: 'column',
    backgroundColor: '#f4f4f4',
  },
  head: {
    backgroundColor: '#fa541c',
    display: 'flex',
    flexDirection: 'row',
    position: 'relative',
    zIndex: 2
  },
  headBack: {
    position: 'absolute',
    top: 0,
    left: 0,
    paddingLeft: 10,
    paddingRight: 10,
  },
  headRight: {
    position: 'absolute',
    top: 0,
    right: 0,
    paddingLeft: 10,
    paddingRight: 10,

  },
  headBackText: {
    height: 44,
    lineHeight: 44,
    color: '#fff',
  },
  headText: {
    height: 44,
    lineHeight: 44,
    color: '#fff',
    flex: 1,
    textAlign: 'center'
  },
  contentWrap: {
    flex: 1,
    backgroundColor: '#f4f4f4',
  }
}
